<template>
    <div>
        <div class="map-form" v-if="config.reportType=='map'">
            <div class="map-form-head">{{i18n('list.mapConfig','地图配置')}}</div>
            <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
                <a-form-model-item :label="i18n('list.mapType','地图类型')">
                    <a-select v-model="config.mapType" :options="mapTypes" :getPopupContainer="(p)=>p.parentNode"> </a-select>
                </a-form-model-item>
                <a-form-model-item :label="i18n('list.colorLegend','颜色图例')">
                    <a-switch size="small" v-model="config.isLegend" />
                </a-form-model-item>
                <a-form-model-item :label="i18n('list.visualMap','视觉映射')">
                    <a-switch size="small" v-model="config.visualMap" />
                </a-form-model-item>
            </a-form>
        </div>
        <div class="chart-class" v-if="config.reportType!='gauge' && config.reportType!='map'&& config.reportType!='customChart'">
            <div>{{i18n('list.chartColor','图表颜色')}}</div>
            <a-radio-group style="margin-top: 10px" @change="onChange" v-model="colour.value">
                <div>
                    <div>
                        <a-radio  :value="1">
                            <ul class="colourback">
                                <li v-for="colourback in colours[1]" :style="{background:colourback}"></li>
                            </ul>
                        </a-radio>
                    </div>
                    <div>
                        <a-radio :value="2">
                            <ul class="colourback">
                                <li v-for="colourback in colours[2]" :style="{background:colourback}"></li>
                            </ul>
                        </a-radio>
                    </div>
                </div>
                <div>
                    <a-radio :value="3">
                        {{i18n('list.customColor','自定义颜色')}}
                        <div class="color-box">
                            <div class="colcjia" @click="addto"><i class="iconfont iconjia"></i></div>
                                <div class="ainput">
                                        <span v-for="(obj,index) in definition" :key="index" @mouseenter="mouseenter(index)" @mouseleave="mouseleave('null')">
                                            <span  @click="Remove(index)" v-if="display == index"  class="delete"><i class="iconfont iconmodal-close"></i></span>
                                            <a-input class="labeinput_list"  v-decorator="[obj]" v-model="definition[index]" type="color" :placeholder="i18n('list.labelColor','标签颜色')"/>
                                        </span>
                                </div>
                        </div>
                    </a-radio>
                </div>
            </a-radio-group>
        </div>
      <!--自定义组件-->
      <div v-if="config.reportType=='customChart'">
        <a-button style="margin-left: 10px;margin-right: 5px" @click="editCustomChart()">{{i18n('form.config','配置')}}</a-button>
        <a-tag color="green" v-if="config.jsScript">{{i18n('list.configured','已配置')}}</a-tag>
        <a-tag color="red" v-else>{{i18n('list.notConfig','未配置')}}</a-tag>
      </div>
    </div>
</template>

<script>
import MapTypes from "@/views/modules/form/core/chartComponent/json/MapTypes"
import CustomChartJs from "@/views/modules/form/core/FormChartComponent/CustomChartJs";
import {Util} from "@lowcode/jpaas-common-lib";
export default {
    name: "PropertySetting",
    props:["config"],
    mixins:[MapTypes],
    data() {
        return {
            //自定义颜色
            definition:[],
            //鼠标移上去删除
            display:null,
            //固定颜色
            colours:{
                1:['#3fb1e3','#6ae6c2','#9fa7e6','#c4eaad','#94dee7','#626c90'],
                2:['#2dc7c9','#b6a2df','#59b1f0','#ffb880','#d97a80','#8d99b3']
            },
            colour:{
                value:"",
                content:[]
            }
        }
    },
    created() {
        if( this.config && this.config.colour &&  this.config.colour.value){
            this.colour.value =this.config.colour.value;
            this.colour.content =this.config.colour.content;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartComponent", key);
        },
        //删除自定义颜色
        Remove(index){
            this.colour.content.splice(index, 1);
            this.$emit("setPropertySetting",{
                colour:this.colour
            });
        },
        //添加自定义颜色
        addto(){
            this.definition.push('#3fb1e3');
        },
        //颜色只定义移上去显示那个
        mouseenter(index){
            this.display = index;
        },
        mouseleave(name){
            this.display = name
        },
        //选中颜色
        onChange(e){
            this.colour.value =e.target.value;
            if(e.target.value ==3){
                this.colour.content =this.definition;
            }else {
                this.colour.content =this.colours[e.target.value];
                if(this.definition.length>0){
                    this.definition=[];
                }
            }
            this.$emit("setPropertySetting",{
                colour:this.colour
            });
        },
        editCustomChart(){
          var self=this;
          var conf = {
            component: CustomChartJs,
            data: {
              config: this.config,
            },
            curVm: this,
            zIndex:10000,
            max:true,
            title: this.i18n('list.customConfig','自定义图表配置')
          }
          Util.open(conf, function (action, jsScript) {
            if (action != 'ok') return;
            self.$set(self.config, "jsScript", jsScript);
          });
        }
    },
    watch: {
        "definition":function (val){
            this.colour.content =val;
            this.$emit("setPropertySetting",{
                colour:this.colour
            })
        }
    }
}
</script>

<style scoped>
.labeinput_list{
    width: 32px;
    margin-right: 10px;
    margin-top: 4px;
    padding: 0px;
}
.delete {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    background: #ff5b5b;
    z-index: 999;
    margin-top: 8px;
    text-align: center;
    line-height: 14px;
    position: absolute;
    top: -10px;
    right: 5px;
}

.delete i {
    font-size: 12px;
}
.ainput {
    width: 180px;
    margin-left: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;
}

.ainput > span {
    position: relative;
    display: inline-block;
}
.color-box {
    display: flex;
}

.chart-tit {
    margin-top: 10px;
}
.chart-class{
    padding: 0px 20px;
}
.map-form-head{
    margin-left: 16px;
}
.map-form >>>.ant-form{
    padding:0px 10px 0px 0px!important; ;
}
.colourback{
    float: right;
    border-radius: 4px;
    border: solid 1px #dadde0;
    padding: 5px 0px 5px 5px;
    margin-left: -10px;
    margin-top: -5px;
}
.colourback li{
    width: 20px;
    height: 20px;
    float: left;
    border-radius: 3px;
    margin-right: 5px;
}
.colcjia{
    width: 28px;
    height: 28px;
    background-color: #f5f7fa;
    border-radius: 4px;
    border: solid 1px #dadde0;
    text-align: center;
    line-height: 28px;
    float: left;
    margin-left: 21px;
    margin-top: 10px;
}
</style>